<template>
  <div role="group"  class="step_box">
    <div class="step_button">
            <i @click="subValue" class="iconfont icon-ic_Reduce"></i>
        </div>
      
      <van-field class="step_field" type="number" v-model="dataValue" :placeholder="t('')">
              <template #button> % </template>
            </van-field>
            <div  class="step_button">
            <i @click="addValue" class="iconfont icon-ic_increase"></i>
        </div>
        
  </div>
  </template>
  <script setup>
  import { useStore } from "vuex";
  import { useI18n } from "vue-i18n";
  import { ref, onMounted, computed } from "vue";
  const { locale, t } = useI18n();
  const store = useStore();
  const props = defineProps({
    modelValue: {
    type: [Number,String],
    default: 0,
  },
});
const emit = defineEmits(["change", "update:modelValue"]);
const dataValue = computed({
  get() {
    return props.modelValue;
  },
  set(value) {
    emit("update:modelValue", value);
  },
});
const subValue = ()=>{
    dataValue.value = Number( dataValue.value) - 0.5
}
const addValue = ()=>{
    dataValue.value = Number(dataValue.value)  + 0.5
}
  // 改变法币查询
  </script>
  <style lang="scss" scoped>
  .step_box{
    display: flex;
    align-items: center;
    gap: 5px;
    .step_button{
        height: 22px;
        width: 22px;
        color: #fff;
        justify-content: center;
        display: flex;
        align-items: center;
        border-radius: 6px;
        background: #3a3a3c;

    }
    .step_field{
        padding: 0px 6px;
        width: 50px;
        height: 30px;
    }
  }
  .status_tab{
    color: rgb(246, 109, 26);
  }
  </style>

